<template>
  <div class="tab-wrapper">
      <!-- 设计师 我的首页 -->
      <div class="tabbar">
        <div class="boundarycase"></div>
        <!-- 联系客服 -->
        <div class="CTabLine bgwrite"
            v-for="(orders,indexO,keyO) in propsArr.taborders"
            :key="keyO">
            <router-link :to="{path: orders.link ,query:{ title:orders.params }}">
                <div class="tabContent">
                <span class="wordsBlack tabbarFont" v-cloak>{{ orders.tabFont }}</span>
                <div class="cv-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
                </div>
            </router-link>
        </div>
        <div class="boundarycase"></div>
        <!-- 申请入驻为表现师 -->
        <div class="CTabLine bgwrite"
            v-for="(news,indexN,keyN) in propsArr.tabnews"
            :key="keyN">
            <router-link :to="{path: news.link ,query:{ title:news.params }}">
                <div class="tabContent">
                    <span class="wordsBlack tabbarFont" v-cloak>{{ news.tabFont }}</span>
                    <div class="cards-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
                </div>
            </router-link>
        </div>
        <div class="boundarycase"></div>
        <!-- 邀请好友 -->
        <div class="CTabLine bgwrite"
            v-for="(news,indexN,keyN) in propsArr.tabInvite"
            :key="keyN">
            <router-link :to="{path: news.link ,query:{ title:news.params }}">
                <div class="tabContent">
                    <span class="wordsBlack tabbarFont" v-cloak>{{ news.tabFont }}</span>
                    <div class="cards-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
                </div>
            </router-link>
        </div>
        <div class="boundarycase"></div>
        <!-- 建议反馈 -->
        <div class="CTabLine bgwrite"
            v-for="(news,indexN,keyN) in propsArr.tabInteractive"
            :key="keyN">
            <router-link :to="{path: news.link ,query:{ title:news.params }}">
                <div class="tabContent">
                    <span class="wordsBlack tabbarFont" v-cloak>{{ news.tabFont }}</span>
                    <div class="cards-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
                </div>
            </router-link>
        </div>
        <div class="boundarycase"></div>
        <!-- 建议反馈 -->
        <div class="CTabLine bgwrite"
            v-for="(news,indexN,keyN) in propsArr.tabSuggest"
            :key="keyN">
            <router-link :to="{path: news.link ,query:{ title:news.params }}">
                <div class="tabContent">
                    <span class="wordsBlack tabbarFont" v-cloak>{{ news.tabFont }}</span>
                    <div class="cards-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
                </div>
            </router-link>
        </div>
        <div style="height: 1rem;"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["TabArray"],
  data() {
    return {
      propsArr: []
    };
  },
  mounted() {
    this.propsArr = this.TabArray;
  },
};
</script>
<style lang="scss" scoped>
.tab-wrapper{
    width: 100%;
    position: absolute;
    top: 4.56rem;
    bottom: 0.5rem;
    display: flex;
}
.tabbar {
    flex: 1;
    overflow-y: scroll;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0.24rem;
  .CTabLine {
      position: relative;
      width: 100%;
      height: 1rem;
      background: #ffffff;
      border-radius: 0.1rem;
      .tabContent {
        position: relative;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        .tabbarIcon {
          width: 0.32rem;
        }
        .tabbarFont {
          font-size: 0.28rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          margin-left: 0.2rem;
          color: #656565;
        }
        .cv-case{
            position: absolute;
            right: 0;
            height: 1rem;
            img{
                width: 0.14rem;
                height: 0.26rem;
                margin: 0.35rem 0;
            }
        }
        .cards-case{
            position: absolute;
            right: 0;
            height: 1rem;
            img{
                width: 0.14rem;
                height: 0.26rem;
                margin: 0.35rem 0;
            }
        }
        
      }
    }
    .boundarycase{
        width: 100%;
        height: 0.24rem;
    }
}
</style>
